<template>
  <div class="taskSwitching">
    <nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
      <template #leftin>
        <Search2 />
      </template>
      <template #rightin>
        <Photograph />
      </template>
    </nut-searchbar>
    <div class="taskSwitching-box">
      <nut-swipe-group lock>
        <nut-swipe v-for="(value, index) in baseList" :key="index" :name="index">
          <nut-cell :round-radius="index">
            <div class="taskSwitching-box-tipnm">
              <div class="taskSwitching-box-tipnm-production">生产线梯队{{ value.queueNo }}</div>
              <div class="taskSwitching-box-tipnm-productionList">今日排产: {{ value.totalValue }}</div>
              <div class="taskSwitching-box-tipnm-unproduced">今日已生产: {{ value.produced }}</div>
              <div class="taskSwitching-box-tipnm-unproduced">今日未生产: {{ value.unproduced }}</div>
              <div class="taskSwitching-box-tipnm-unproduced">当前排队号: {{ value.queueUp }}</div>
              <nut-progress
                style="width: 300px; margin-top: 15px"
                :text-inside="true"
                size="large"
                :percentage="parseInt((value.produced / value.totalValue) * 100)"
                stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
                status="active"
              >
                <span class="taskSwitching-box-tipnm-finxax">完成率: {{ parseInt((value.produced / value.totalValue) * 100) }} %</span>
              </nut-progress>
            </div>
          </nut-cell>
          <template #right>
            <nut-button shape="square" style="height: 100%" type="danger" @click="toggle(value)">切换</nut-button>
          </template>
        </nut-swipe>
      </nut-swipe-group>
    </div>
  </div>
</template>

<script lang="ts">
import { Left, Search2, Photograph, Message } from '@nutui/icons-vue';
import importFunction from './taskSwitching';
import { toRefs } from 'vue';
export default {
  components: {
    Left,
    Search2,
    Photograph,
    Message,
  },
  setup() {
    const { init, base, toggle } = importFunction();
    init();
    return {
      ...toRefs(base),
      toggle,
    };
  },
};
</script>

<style lang="less" scoped>
.taskSwitching {
  &-box {
    width: 90%;
    margin: 10px auto 100px;
    background: white;
    overflow: hidden;
    &-tipnm {
      &-production {
        font-size: 12px;
        font-weight: 100;
        color: rgb(42, 42, 42);
        margin-bottom: 10px;
      }
      &-productionList {
        font-size: 20px;
        font-weight: 100;
        color: rgb(14, 67, 153);
        margin-bottom: 10px;
      }
      &-unproduced {
        font-weight: 100;
      }
      &-finxax {
        color: rgb(255, 255, 255);
        font-weight: 900;
        font-size: 12px;
        width: 100%;
        padding: 5px 4px;
        background: rgba(32, 147, 255, 1);
        text-align: center;
        border-radius: 5px;
      }
    }
  }
}
</style>
